<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>单点登录 SSO - 现代认证解决方案</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
        }
        .serif-font {
            font-family: 'Noto Serif SC', serif;
        }
        .gradient-bg {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        .card-hover {
            transition: all 0.3s ease;
        }
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
        }
        .text-gradient {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        .drop-cap::first-letter {
            float: left;
            font-size: 4rem;
            line-height: 3rem;
            padding-right: 0.5rem;
            margin-top: 0.5rem;
            font-weight: 700;
            color: #667eea;
        }
        .section-divider {
            position: relative;
            text-align: center;
            margin: 4rem 0;
        }
        .section-divider::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            height: 1px;
            background: linear-gradient(to right, transparent, #e5e7eb, transparent);
        }
        .section-divider span {
            background: white;
            padding: 0 2rem;
            position: relative;
            font-size: 0.875rem;
            color: #9ca3af;
        }
        @keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
            100% { transform: translateY(0px); }
        }
        .float-animation {
            animation: float 3s ease-in-out infinite;
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- Hero Section -->
    <section class="gradient-bg text-white py-20 px-6">
        <div class="max-w-6xl mx-auto text-center">
            <div class="mb-8 float-animation">
                <i class="fas fa-key text-6xl opacity-80"></i>
            </div>
            <h1 class="text-5xl md:text-6xl font-bold mb-6 serif-font">单点登录 SSO</h1>
            <p class="text-xl md:text-2xl mb-8 opacity-90">一次登录，畅游所有应用的现代认证解决方案</p>
            <div class="flex justify-center space-x-4">
                <span class="bg-white bg-opacity-20 px-4 py-2 rounded-full text-sm">
                    <i class="fas fa-shield-alt mr-2"></i>安全认证
                </span>
                <span class="bg-white bg-opacity-20 px-4 py-2 rounded-full text-sm">
                    <i class="fas fa-users mr-2"></i>用户友好
                </span>
                <span class="bg-white bg-opacity-20 px-4 py-2 rounded-full text-sm">
                    <i class="fas fa-cogs mr-2"></i>易于管理
                </span>
            </div>
        </div>
    </section>

    <!-- Introduction Section -->
    <section class="py-16 px-6">
        <div class="max-w-4xl mx-auto">
            <div class="bg-white rounded-2xl shadow-xl p-8 md:p-12">
                <h2 class="text-3xl font-bold mb-6 text-gradient">什么是单点登录？</h2>
                <p class="text-lg leading-relaxed text-gray-700 drop-cap">
                    单点登录（Single Sign-On，SSO）是一种用户认证机制，旨在简化用户在多个应用程序或系统中登录的过程。用户只需登录一次，便可以访问所有相关的应用程序和系统，无需在每个应用程序中单独登录。这种机制大大提高了用户体验，同时简化了用户的管理和系统的安全控制。
                </p>
            </div>
        </div>
    </section>

    <!-- How It Works Section -->
    <section class="py-16 px-6 bg-gray-100">
        <div class="max-w-6xl mx-auto">
            <h2 class="text-4xl font-bold text-center mb-12 serif-font">工作原理</h2>
            
            <!-- Mermaid Diagram -->
            <div class="bg-white rounded-2xl shadow-lg p-8 mb-12">
                <div class="mermaid">
                    graph LR
                        A[用户] -->|1. 访问应用| B[应用程序 SP]
                        B -->|2. 重定向| C[SSO认证服务 IdP]
                        C -->|3. 显示登录页| A
                        A -->|4. 输入凭据| C
                        C -->|5. 验证身份| D[认证成功]
                        D -->|6. 生成令牌| C
                        C -->|7. 返回令牌| B
                        B -->|8. 验证令牌| E[允许访问]
                        E -->|9. 访问资源| A
                        
                        style A fill:#667eea,stroke:#fff,stroke-width:2px,color:#fff
                        style C fill:#764ba2,stroke:#fff,stroke-width:2px,color:#fff
                        style D fill:#4ade80,stroke:#fff,stroke-width:2px,color:#fff
                        style E fill:#4ade80,stroke:#fff,stroke-width:2px,color:#fff
                </div>
            </div>

            <!-- Process Steps -->
            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
                <div class="bg-white rounded-xl p-6 card-hover">
                    <div class="text-purple-600 text-3xl mb-4">
                        <i class="fas fa-user-check"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">1. 用户认证</h3>
                    <p class="text-gray-600">用户访问受保护的应用程序时，系统会将其重定向到SSO认证服务。</p>
                </div>
                
                <div class="bg-white rounded-xl p-6 card-hover">
                    <div class="text-purple-600 text-3xl mb-4">
                        <i class="fas fa-sign-in-alt"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">2. 用户登录</h3>
                    <p class="text-gray-600">用户在SSO认证服务中输入凭据，系统验证身份并生成认证令牌。</p>
                </div>
                
                <div class="bg-white rounded-xl p-6 card-hover">
                    <div class="text-purple-600 text-3xl mb-4">
                        <i class="fas fa-ticket-alt"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">3. 返回令牌</h3>
                    <p class="text-gray-600">认证服务将令牌发送到浏览器，并重定向回原应用程序。</p>
                </div>
                
                <div class="bg-white rounded-xl p-6 card-hover">
                    <div class="text-purple-600 text-3xl mb-4">
                        <i class="fas fa-unlock"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">4. 访问应用</h3>
                    <p class="text-gray-600">令牌验证成功后，用户可以访问应用资源，无需重新登录。</p>
                </div>
                
                <div class="bg-white rounded-xl p-6 card-hover">
                    <div class="text-purple-600 text-3xl mb-4">
                        <i class="fas fa-sync-alt"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">5. 会话管理</h3>
                    <p class="text-gray-600">在会话有效期内，用户可以无缝访问多个应用程序。</p>
                </div>
                
                <div class="bg-white rounded-xl p-6 card-hover">
                    <div class="text-purple-600 text-3xl mb-4">
                        <i class="fas fa-sign-out-alt"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">6. 统一注销</h3>
                    <p class="text-gray-600">用户注销时，SSO服务会注销所有相关的会话。</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Implementation Technologies -->
    <section class="py-16 px-6">
        <div class="max-w-6xl mx-auto">
            <h2 class="text-4xl font-bold text-center mb-12 serif-font">实现技术</h2>
            
            <div class="grid md:grid-cols-2 gap-8">
                <div class="bg-gradient-to-br from-purple-50 to-pink-50 rounded-2xl p-8 card-hover">
                    <div class="flex items-center mb-4">
                        <i class="fas fa-code text-3xl text-purple-600 mr-4"></i>
                        <h3 class="text-2xl font-bold">SAML</h3>
                    </div>
                    <p class="text-gray-700 mb-4">Security Assertion Markup Language 是一种基于XML的开放标准，用于在不同安全域之间交换认证和授权数据。</p>
                    <div class="flex flex-wrap gap-2">
                        <span class="bg-white px-3 py-1 rounded-full text-sm">企业级应用</span>
                        <span class="bg-white px-3 py-1 rounded-full text-sm">跨域认证</span>
                        <span class="bg-white px-3 py-1 rounded-full text-sm">单点注销</span>
                    </div>
                </div>
                
                <div class="bg-gradient-to-br from-blue-50 to-cyan-50 rounded-2xl p-8 card-hover">
                    <div class="flex items-center mb-4">
                        <i class="fas fa-shield-alt text-3xl text-blue-600 mr-4"></i>
                        <h3 class="text-2xl font-bold">OAuth 2.0 & OpenID Connect</h3>
                    </div>
                    <p class="text-gray-700 mb-4">OAuth 2.0 提供授权框架，OpenID Connect 在其基础上增加了身份验证功能，实现现代化的单点登录。</p>
                    <div class="flex flex-wrap gap-2">
                        <span class="bg-white px-3 py-1 rounded-full text-sm">社交登录</span>
                        <span class="bg-white px-3 py-1 rounded-full text-sm">移动应用</span>
                        <span class="bg-white px-3 py-1 rounded-full text-sm">API认证</span>
                    </div>
                </div>
                
                <div class="bg-gradient-to-br from-green-50 to-emerald-50 rounded-2xl p-8 card-hover">
                    <div class="flex items-center mb-4">
                        <i class="fas fa-key text-3xl text-green-600 mr-4"></i>
                        <h3 class="text-2xl font-bold">JWT</h3>
                    </div>
                    <p class="text-gray-700 mb-4">JSON Web Token 是一种紧凑、安全的自包含令牌，用于在网络应用环境中传递声明。</p>
                    <div class="flex flex-wrap gap-2">
                        <span class="bg-white px-3 py-1 rounded-full text-sm">无状态认证</span>
                        <span class="bg-white px-3 py-1 rounded-full text-sm">跨域支持</span>
                        <span class="bg-white px-3 py-1 rounded-full text-sm">轻量级</span>
                    </div>
                </div>
                
                <div class="bg-gradient-to-br from-orange-50 to-red-50 rounded-2xl p-8 card-hover">
                    <div class="flex items-center mb-4">
                        <i class="fas fa-server text-3xl text-orange-600 mr-4"></i>
                        <h3 class="text-2xl font-bold">CAS</h3>
                    </div>
                    <p class="text-gray-700 mb-4">Central Authentication Service 是一种专门用于单点登录的协议，通过中央认证服务器实现。</p>
                    <div class="flex flex-wrap gap-2">
                        <span class="bg-white px-3 py-1 rounded-full text-sm">开源方案</span>
                        <span class="bg-white px-3 py-1 rounded-full text-sm">高校应用</span>
                        <span class="bg-white px-3 py-1 rounded-full text-sm